<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link active">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Navbars</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Navbars</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Navbars overview -->
							<div class="card" id="overview">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Navbars overview</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-3">
										<p>Navbar is a navigation component, usually displayed on top of the page and includes brand logo, navigation and other components. By default, navbar has top <code>static</code> position. Navbar placement can be top and bottom, types can be <code>static</code>, <code>fixed</code> and <code>sticky</code>. Navbar available in 3 different sizes - large, default and small. All navbar components automatically adjust their height to match chosen navbar height.</p>

										<p>Since navbars are available in 3 different sizes, it's required to specify proper class in <code>&lt;body></code> tag to set correct padding. If single navbar is sticked to the bottom of the page, correct body classes will be <code>.navbar-bottom</code> for default height and <code>.navbar-bottom-*</code> for given size - large (*-lg) and small (*-sm).</p>
									</div>

									<p>Table below describes all navbar types and combinations available:</p>
									<div class="table-responsive" id="options">
										<table class="table table-bordered">
											<thead>
												<tr>
													<th style="width: 250px;">Option</th>
													<th>Description</th>
												</tr>
											</thead>
											<tbody>
												<tr class="table-active">
													<td colspan="2"><span class="font-weight-semibold">Type</span></td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Single navbar</td>
													<td>Single navbar. Collapsible navbar, always displayed full width without spacings (except navbar component) and on top by default. Supports different navbar components and usually appears as a main navbar with branding info, user info and navigation.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Multiple navbars</td>
													<td>Multiple navbars have additional display options. They can be placed one after another, mixed with page header content and main content. Second sidebar is usually used as a separate component with main navigation (in horizontal navigation layout) and alternative content.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Navbar component</td>
													<td>Displayed as a stand-alone component: includes spacings, borders and rounded corners. Can be placed anywhere - content area, footer, header or used as a main navbar. Supports all available navbar components.</td>
												</tr>

												<tr class="table-border-double table-active">
													<td colspan="2"><span class="font-weight-semibold">Positioning</span></td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Top single</td>
													<td>Single top navbar, usually a main navigation toolbar.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Top multiple</td>
													<td>Double top navbar. Can be both static or fixed, check navbar related pages.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Bottom single</td>
													<td>Single bottom navbar, usually a main navigation toolbar.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Bottom multiple</td>
													<td>Double bottom navbar. Can be both static or fixed, check navbar related pages.</td>
												</tr>

												<tr class="table-border-double table-active">
													<td colspan="2"><span class="font-weight-semibold">Variations</span></td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Static</td>
													<td>Default option. Means navbar is scrolled out along with content.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Fixed</td>
													<td>Always sticked to the page top and always visible.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Hideable</td>
													<td>Hide navbar on scroll down and display on scroll up. Animated by default and supports both top and bottom placement.</td>
												</tr>

												<tr class="table-border-double table-active">
													<td colspan="2"><span class="font-weight-semibold">Styling</span></td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Light</td>
													<td>Light background with adapted components: navigation, links etc. Requires <code>.navbar-light</code> class added to the <code>&lt;navbar></code> container.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Dark</td>
													<td>Dark background with adapted components: navigation, links etc. Requires <code>.navbar-dark</code> class added to the <code>&lt;navbar></code> container.</td>
												</tr>
												<tr>
													<td class="font-weight-semibold">Custom color</td>
													<td>Custom background color. Requires <code>.navbar-dark</code> class and <code>.bg-*</code> color class added to the <code>&lt;navbar></code> container.</td>
												</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<!-- /navbars overview -->


							<!-- Navbar markup -->
							<div class="card" id="markup">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Navbar markup</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
					                </div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<p>Navbar markup is identical in all layout variations and matches default Bootstrap's markup. The only difference is navbar placement and type. Navbar component uses flexbox model, this means all components are vertically centered by default. Below you'll find markup examples of different variations of navbar component.</p>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold" id="markup_static">Static navbar</h6>
										<p>By default, top and bottom navbars have static position and scroll away along with content. This use case doesn't require any additional classes for <code>.navbar</code> and <code>&lt;body></code> containers, this means navbar appearance depends on its placement: in the template top static navbar is the first direct child of <code>&lt;body></code> and placed before <code>.page-content</code> container, bottom static navbar is placed after it.</p>
										<pre data-line="2, 5" class="language-markup"><code>&lt;!-- Document body -->
&lt;body>

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-dark navbar-expand-md">

		&lt;!-- Navbar brand -->
		&lt;div class="navbar-brand">
			...
		&lt;/div>
		&lt;!-- /navbar brand -->


		&lt;!-- Mobile toggler -->
		&lt;div class="d-md-none">
			...
		&lt;/div>
		&lt;!-- /mobile toggler -->


		&lt;!-- Navbar content -->
		&lt;div class="collapse navbar-collapse" id="navbar">
			...
		&lt;/div>
		&lt;!-- /navbar content -->

	&lt;/div>
	&lt;!-- /main navbar -->

&lt;/body>
&lt;!-- /document body -->
</code></pre>

									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold" id="markup_fixed_top">Top fixed navbar</h6>
										<p>Top fixed navbar markup is similar to static, the only difference is it requires <code>.fixed-top</code> class added to the <code>&lt;navbar></code> container and proper body class to add top padding:</p>
										<pre data-line="2, 5" class="language-markup"><code>&lt;!-- Document body -->
&lt;body class="navbar-top">

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-dark navbar-expand-md fixed-top">

		&lt;!-- Navbar brand -->
		&lt;div class="navbar-brand">
			...
		&lt;/div>
		&lt;!-- /navbar brand -->


		&lt;!-- Mobile toggler -->
		&lt;div class="d-md-none">
			...
		&lt;/div>
		&lt;!-- /mobile toggler -->


		&lt;!-- Navbar content -->
		&lt;div class="collapse navbar-collapse" id="navbar">
			...
		&lt;/div>
		&lt;!-- /navbar content -->

	&lt;/div>
	&lt;!-- /main navbar -->

&lt;/body>
&lt;!-- /document body -->
</code></pre>

									</div>


									<div class="mb-4">
										<h6 class="font-weight-semibold" id="markup_fixed_bottom">Bottom fixed navbar</h6>
										<p>Bottom fixed navbar markup is similar to static and top fixed, the only difference is it requires <code>.fixed-bottom</code> class added to the <code>&lt;navbar></code> container and proper body class to add bottom padding:</p>
										<pre data-line="2, 5" class="language-markup"><code>&lt;!-- Document body -->
&lt;body class="navbar-bottom">

	&lt;!-- Main navbar -->
	&lt;div class="navbar navbar-dark navbar-expand-md fixed-bottom">

		&lt;!-- Navbar brand -->
		&lt;div class="navbar-brand">
			...
		&lt;/div>
		&lt;!-- /navbar brand -->


		&lt;!-- Mobile toggler -->
		&lt;div class="d-md-none">
			...
		&lt;/div>
		&lt;!-- /mobile toggler -->


		&lt;!-- Navbar content -->
		&lt;div class="collapse navbar-collapse" id="navbar">
			...
		&lt;/div>
		&lt;!-- /navbar content -->

	&lt;/div>
	&lt;!-- /main navbar -->

&lt;/body>
&lt;!-- /document body -->
</code></pre>

									</div>


									<div>
										<h6 class="font-weight-semibold" id="markup_collapsed">Collapsed navbar</h6>
										<p>There is one additional option, when navbar doesn't have a logo and used as a toolbar. In this case the whole navbar becomes a link on mobiles and tables, all navbar content opens on click. Supports all options stated above:</p>
										<pre data-line="6-11" class="language-markup"><code>&lt;!-- Document body -->
&lt;body>
	
	&lt;!-- Footer -->
	&lt;div class="navbar navbar-expand-lg navbar-light">
		&lt;div class="text-center d-lg-none w-100">
			&lt;button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
				&lt;i class="icon-unfold mr-2">&lt;/i>
				Footer
			&lt;/button>
		&lt;/div>

		&lt;div class="navbar-collapse collapse" id="navbar-footer">
			...
		&lt;/div>
	&lt;/div>
	&lt;!-- /footer -->

&lt;/body>
&lt;!-- /document body -->
</code></pre>

									</div>
								</div>
							</div>
							<!-- /sidebar markup -->


							<!-- Navbar classes -->
							<div class="card" id="classes_navbar">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Navbar classes</h5>

									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									Navbar is a complex, but very flexible component. It supports different types of content, responsive utilities manage content appearance and spacing on various screen sizes, supports multiple sizing and color options etc. And everything can be changed on-the-fly directly in HTML markup. If you can't find an option you need, you can always extend default SCSS code. Table below demonstrates all available classes that can be used within the navbar:
								</div>

								<div class="table-responsive">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th style="width: 20%;">Class</th>
												<th style="width: 20%;">Type</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.navbar</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>Default navbar class, must be used with any navbar type and color. Responsible for basic navbar and navbar components styling as a parent container.</td>
											</tr>
											<tr>
												<td><code>.navbar-light</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>This class is used for <code>dark</code> background colors - default dark color is set in <code>$navbar-light-bg</code> variable, feel free to adjust the color according to your needs.</td>
											</tr>
											<tr>
												<td><code>.navbar-light.alpha-*</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>Combination of these classes allows you to set custom <strong>light</strong> color to the <code>light</code> navbar. Note - <code>.navbar-light</code> is required, it's responsible for correct content styling.</td>
											</tr>
											<tr>
												<td><code>.navbar-dark</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>This class is used for <code>dark</code> background colors - default dark color is set in <code>$navbar-dark-bg</code> variable, feel free to adjust the color according to your needs.</td>
											</tr>
											<tr>
												<td><code>.navbar-dark.bg-*</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>Combination of these classes allows you to set custom <strong>dark</strong> color to the <code>dark</code> navbar. Note - <code>.navbar-dark</code> is required, it's responsible for correct content styling.</td>
											</tr>
											<tr>
												<td><code>.navbar-expand-[breakpoint]</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>For navbars that never collapse, add the <code>.navbar-expand</code> class on the navbar. For navbars that always collapse, don’t add any <code>.navbar-expand</code> class. Otherwise use this class to change when navbar content collapses behind a button.</td>
											</tr>
											<tr>
												<td><code>.navbar-brand</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>Class for logo container. It can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles</td>
											</tr>
											<tr>
												<td><code>.navbar-toggler</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>This class needs to be added to the navbar toggle button that toggles navbar content on small screens. Always used with visibility utility classes.</td>
											</tr>
											<tr>
												<td><code>.navbar-collapse</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>Groups and hides navbar contents by a parent breakpoint. Requires an ID for targeting collapsible container when sidebar content is collapsed.</td>
											</tr>
											<tr>
												<td><code>.navbar-nav</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>Responsive navigation container class that adds default styling for navbar navigation.</td>
											</tr>
											<tr>
												<td><code>.nav-item</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>Wrapper class for immediate parents of all navigation links. Responsible for correct styling of nav items</td>
											</tr>
											<tr>
												<td><code>.navbar-nav-link</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>Custom class for links within <code>.navbar-nav</code> list, it sets proper styling for links in light and dark navbars.</td>
											</tr>
											<tr>
												<td><code>.navbar-text</code></td>
												<td><span class="text-muted">Required</span></td>
												<td>This class adjusts vertical alignment and horizontal spacing for strings of text</td>
											</tr>
											<tr>
												<td><code>.navbar-component</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>Display navbar as a stand alone component, with border and rounded corners.</td>
											</tr>
											<tr>
												<td><code>.fixed-top</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>Makes navbar sticked to the <code>top</code> of the page. Requires proper class for <code>&lt;body></code> container, see the table below.</td>
											</tr>
											<tr>
												<td><code>.fixed-bottom</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>Makes navbar sticked to the <code>bottom</code> of the page. Requires proper class for <code>&lt;body></code> container, see the table below.</td>
											</tr>
											<tr>
												<td><code>.sticky-top</code></td>
												<td><span class="text-muted">Optional</span></td>
												<td>Adds <code>position: sticky;</code> to the navbar - it's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed. Support is limited.</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- /navbar classes -->


							<!-- Body classes -->
							<div class="card" id="classes_body">
								<div class="card-header header-elements-inline">
									<h5 class="card-title">Body classes</h5>
									<div class="header-elements">
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="reload"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
				                	</div>
								</div>

								<div class="card-body">
									If you want to place navbar in non-static positions, you can choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use <code>position: fixed</code>, meaning they’re pulled from the normal flow of the DOM and require custom classes added to the <code>&lt;body></code> container to prevent overlap with other elements. The following table demonstrates the list of classes for <code>&lt;body></code> container if navbar has non-static position:
								</div>

								<div class="table-responsive">
									<table class="table table-bordered">
										<thead>
											<tr>
												<th style="width: 20%;">Class</th>
												<th>Description</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td><code>.navbar-top</code></td>
												<td>This class adds <code>top</code> padding to the <code>&lt;body></code> container. Works only with default navbar height. If another height is specified, apply another class (see the line below).</td>
											</tr>
											<tr>
												<td><code>.navbar-bottom</code></td>
												<td>This class adds <code>bottom</code> padding to the <code>&lt;body></code> container. Works only with default navbar height. If another height is specified, apply another class (see the line below).</td>
											</tr>
											<tr>
												<td><code>.navbar-top-[size]</code></td>
												<td>Controls <code>top</code> spacing of <code>&lt;body></code> container, if navbar has optional height. Available sizes: small (<code>*-sm</code>) and large (<code>*-lg</code>). Default navbar requires <code>.navbar-top</code> class only.</td>
											</tr>
											<tr>
												<td><code>.navbar-bottom-[size]</code></td>
												<td>Controls <code>bottom</code> spacing of <code>&lt;body></code> container, if navbar has optional height. Available sizes: small (<code>*-sm</code>) and large (<code>*-lg</code>). Default navbar requires <code>.navbar-bottom</code> class only.</td>
											</tr>
											<tr>
												<td><code>.navbar-top-[size]-[size]</code></td>
												<td>Use these classes if the layout has multiple <code>top</code> navbars, where first <code>[size]</code> is the size of the first navbar, second <code>[size]</code> - height of the second navbar. In this particular use case, <code>[size]</code> can be: <code>lg</code> if large height, <code>md</code> is default height <code>sm</code> is small height.  
											</tr>
											<tr>
												<td><code>.navbar-bottom-[size]-[size]</code></td>
												<td>Use these classes if the layout has multiple <code>bottom</code> navbars, where first <code>[size]</code> is the size of the first navbar, second <code>[size]</code> - height of the second navbar. In this particular use case, <code>[size]</code> can be: <code>lg</code> if large height, <code>md</code> is default height <code>sm</code> is small height.  
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!-- /body classes -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item"><a href="#overview" class="nav-link">Navbars overview</a></li>
										<li class="nav-item"><a href="#options" class="nav-link">Navbar options</a></li>
										<li class="nav-item nav-item-submenu">
											<a href="#markup" class="nav-link">Markup</a>
											<ul class="nav nav-group-sub d-block">
												<li class="nav-item"><a href="#markup_static" class="nav-link">Static navbar</a></li>
												<li class="nav-item"><a href="#markup_fixed_top" class="nav-link">Top fixed navbar</a></li>
												<li class="nav-item"><a href="#markup_fixed_bottom" class="nav-link">Bottom fixed navbar</a></li>
												<li class="nav-item"><a href="#markup_collapsed" class="nav-link">Collapsed navbar</a></li>
											</ul>
										</li>
										<li class="nav-item"><a href="#classes_navbar" class="nav-link">Navbar classes</a></li>
										<li class="nav-item"><a href="#classes_body" class="nav-link">Body classes</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
